
<template>
  <div class="payment-details">
    <div class="header">
      <h2>充值详情</h2>
      <div class="btn-group">
        <el-button type="text" @click="handleDetail" icon="el-icon-refresh-right">返回</el-button>
      </div>
    </div>
  <hr />
  <div class="payment-detail-item">

    <p class="detail-value">状态：{{ paymentDetails.paymentStatus==0?'充值中':paymentDetails.paymentStatus==1?'待支付':paymentDetails.paymentStatus==2?'充值成功':paymentDetails.paymentStatus==3?'交易关闭':'充值失败'}}</p>

    <p class="detail-value">交易号：{{ paymentDetails.number }}</p>

    <p class="detail-value">会员类型：{{ paymentDetails.memberType==0?'快递员':"普通会员" }}</p>

    <p class="detail-value">手机号码：{{ paymentDetails.phone }}</p>

    <p class="detail-value">充值金额：{{ paymentDetails.rechargeAmount }}</p>

    <p class="detail-value">充值后余额：{{ paymentDetails.postRechargeAmount }}</p>

    <p class="detail-value">充值币种：{{ paymentDetails.rechargeCurrency==1?'CNY':'PHP'}}</p>

    <p class="detail-value">实际支付CNY：{{ paymentDetails.actualPayable }}</p>

    <p class="detail-value">汇率：{{ paymentDetails.rname }}</p><br/>

    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px;">
    <p class="detail-value"  v-if="paymentDetails.paymentStatus ==0||paymentDetails.paymentStatus ==2||paymentDetails.paymentStatus ==4">
      付款方式：{{ paymentDetails.rechargeChannel==1?'微信':'支付宝'}}
    </p>
    </div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px;">
    <p class="detail-value"  v-if="paymentDetails.paymentStatus ==0||paymentDetails.paymentStatus ==2||paymentDetails.paymentStatus ==4">付款账户：{{ paymentDetails.phone }}</p>
    </div>
    <p class="detail-value">创建时间：{{ paymentDetails.createTime }}</p>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px;">
      <p class="detail-value"  v-if="paymentDetails.paymentStatus ==3">关闭时间：{{ paymentDetails.closingTime }}</p>
    </div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px;">
      <p class="detail-value"  v-if="paymentDetails.paymentStatus ==0||paymentDetails.paymentStatus ==2||paymentDetails.paymentStatus ==4" >付款时间：{{ paymentDetails.paymentTime }}</p>
    </div>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-gap: 10px;">
      <p class="detail-value" v-if="paymentDetails.paymentStatus ==0||paymentDetails.paymentStatus ==2||paymentDetails.paymentStatus ==4" >完成时间：{{ paymentDetails.completionTime }}</p>
    </div>
  </div>

</div>
</template>

<script >
import {getRecharge} from "@/api/finance/recharge";
 export default {
  name: "Details",
  data() {
    return {
      id:"",
      paymentDetails:[],
    }
  },
   created() {
    const id = this.$route.params && this.$route.params.Id;
     getRecharge(id).then(response => {
        this.paymentDetails = response.data;
      });

  },
  methods: {
    handleDetail() {
      this.$router.push({path:"/finance/recharge"}); // 假设支付列表页面的路由名称为 '支付列表'
    }
  }
 }
</script>

<style >
.payment-details {
  width: 1000px;
  border: 1px solid #ccc;
  padding: 20px;
}

.payment-detail-item {
    margin: 10px 0;
    padding: 5px;
}
.detail-value {
    font-size: 16px;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.btn-group{
  display: flex;
  justify-content: flex-end; /* 将按钮放在最右端 */
  margin-bottom: 10px; /* 调整与标题之间的间距 */
}
</style>
